<template>
  <div class="home">
    <div class="box">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <div class="h-title">后台管理</div>
            <div class="h-main">mall</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <div class="h-title">前端项目</div>
            <div class="h-main">mall-admin-web</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <div class="h-title">学习教程</div>
            <div class="h-main">mall-learning</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="box2">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple b-box">
            <img class="b-pic" src="img/1.png" alt="">
            <div>
              <div class="b-title">今日订单总数</div>
              <div class="b-main">200</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple b-box">
            <img class="b-pic" src="img/2.png" alt="">
            <div>
              <div class="b-title">今日销售总额</div>
              <div class="b-main">￥ 5000.00</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple b-box">
            <img class="b-pic" src="img/3.png" alt="">
            <div>
              <div class="b-title">昨日销售总额</div>
              <div class="b-main">mall</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="boxa">
      <div class="boxa-title">待处理事物</div>
      <div class="box3">
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item,index) in happen" :key="index">
            <div class="grid-content bg-purple c-box">
              <span>{{item}}</span>
              <span style="float:right">10</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="box4">
      <el-row :gutter="20">
        <el-col :span="12"><div class="grid-content bg-purple">
          <div class="leftbox4">
            <div class="boxa-title">商品总览</div>
            <div class="box4-main">
              <el-row>
                <el-col :span="6" class="color-danger overview-item-value">100</el-col>
                <el-col :span="6" class="color-danger overview-item-value">200</el-col>
                <el-col :span="6" class="color-danger overview-item-value">1000</el-col>
                <el-col :span="6" class="color-danger overview-item-value">5000</el-col>
              </el-row>
              <el-row class="">
                <el-col :span="6" class="overview-item-title">今日新增</el-col>
                <el-col :span="6" class="overview-item-title">昨日新增</el-col>
                <el-col :span="6" class="overview-item-title">本月新增</el-col>
                <el-col :span="6" class="overview-item-title">会员总数</el-col>
              </el-row>
            </div>
          </div>
        </div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple">
          <div class="rightbox4">
            <div class="boxa-title">用户总览</div>
            <div class="box4-main">
              <el-row>
                <el-col :span="6" class="color-danger overview-item-value">100</el-col>
                <el-col :span="6" class="color-danger overview-item-value">400</el-col>
                <el-col :span="6" class="color-danger overview-item-value">50</el-col>
                <el-col :span="6" class="color-danger overview-item-value">500</el-col>
              </el-row>
              <el-row class="">
                <el-col :span="6" class="overview-item-title">已下架</el-col>
                <el-col :span="6" class="overview-item-title">已上架</el-col>
                <el-col :span="6" class="overview-item-title">库存紧张</el-col>
                <el-col :span="6" class="overview-item-title">全部商品</el-col>
              </el-row>
            </div>
          </div>
        </div></el-col>
      </el-row>
    </div>
    <div class="box5">
      <div class="boxa-title">订单统计</div>
      <el-row :gutter="20">
        <el-col :span="4">
          <div class="grid-content bg-purple box5-a">
            <div>
              <div class="total">本月订单总数</div>
              <div class="num">10000</div>
              <div>
                <span class="changenum greentext">+10%</span>
                <span class="upmonth">同比上月</span>
              </div>
            </div>
            <div style="margin-top:20px">
              <div class="total">本月订单总数</div>
              <div class="num">10000</div>
              <div>
                <span class="changenum redtext">-10%</span>
                <span class="upmonth">同比上周</span>
              </div>
            </div>
            <div style="margin-top:20px">
              <div class="total">本月订单总数</div>
              <div class="num">10000</div>
              <div>
                <span class="changenum greentext">+10%</span>
                <span class="upmonth">同比上月</span>
              </div>
            </div>
            <div style="margin-top:20px">
              <div class="total">本月订单总数</div>
              <div class="num">10000</div>
              <div>
                <span class="changenum redtext">-10%</span>
                <span class="upmonth">同比上周</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="20"><div class="grid-content bg-purple">
          <div class="chart" ref="chart1"></div>
        </div>
      </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// import HelloWorld from '@/components/HelloWorld.vue'
import * as echarts from 'echarts';

export default {
  name: 'HomeView',
  data(){
    return {
      happen:['待付款订单','已完成订单','待确认收货订单','待发货订单','新缺货登记','待处理退款申请','已发货订单','待处理退货订单','广告位即将到期']
    }
  },
  mounted(){
    let chartbox=this.$refs.chart1;
    let chart1=echarts.init(chartbox)
    let option1 = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            // type: 'line'
            type:'bar'
          }
        ]
      };
      chart1.setOption(option1)
  },
  components: {
    
  },
  // async created(){
  //   let res=await this.$http.postHomeApi()
  //   console.log(res)
  // }
}
</script>

<style lang="scss">
  .h-title{
    color: #606266;
    padding: 15px 20px;
    background: #F2F6FC;
    font-weight: bold;
  }
  .h-main{
    padding:20px;
    font-size:18px;
  }
  .boxa-title{
    color: #606266;
    padding: 15px 20px;
    background: #F2F6FC;
    font-weight: bold;
  }
  .box2{
    margin-top:20px;
    .b-box{
      border:1px solid #DCDFE6;
      padding:20px;
      display:flex;
      align-items: center;
    }
    .b-pic{
      width:60px;
      height:60px;
      margin-right:10px;
    }
    .b-title{
      color:#909399;
      font-size:16px;
      margin-bottom:10px;
    }
    .b-main{
      color:#606266;
      font-size:18px;
    }
  }
  
  .box-card-a{
    margin-top:20px;
    border:1px solid #DCDFE6;
    .el-card__header{
      background: #F2F6FC;
    }
    .el-card__body{
      padding:0;
    }
  }
  .boxa{
    margin-top:20px;
    border:1px solid #ddd;
    .box3{
      padding:20px 40px;
      .c-box{
        border-bottom: 1px solid #ddd;
        padding: 10px;
      }
    }
  }
  .box4{
    margin-top:20px;
    .leftbox4,.rightbox4{
      border:1px solid #DCDFE6;
    }
    .box4-main{
      padding:40px;
      text-align:center;
      .overview-item-value{
        font-size:24px;
        color: #f56c6c;
      }
      .overview-item-title{
        margin-top:10px;
        color:#606266;
        font-size:16px;
      }
    }
  }
  .box5{
    border:1px solid #DCDFE6;
    margin:20px 0;
    .box5-a{
      padding:20px;
      border-right:1px solid #DCDFE6;
      .total{
        color: #909399;
        font-size: 14px
      }
      .num{
        color: #606266;
        font-size: 24px;
        padding: 10px 0;
      }
      .changenum{
        font-size: 14px;
      }
      .upmonth{
        color: #C0C4CC;
        font-size: 14px;
      }
      .greentext{
        color:#67c23a;
      }
      .redtext{
        color:#f56c6c;
      }
    }
    .chart{
      width:100%;
      height:400px;
    }
  }
</style>